<template>
    <div class="myChildren">
        <div class="mychildrenheader">
            <slot name="back" style="left:0;"></slot>
            <span class="headerchildren">孩子信息</span>
        </div>
        <div class="itemCountainer">
            <span class="Childrentitle">头像</span>
            
            <!-- <img  class="headerimg" src="../../assets/images/男孩.png" alt=""> -->
            <slot name="stuAvatar" class="Childrenmessage" style="border-radius:50%"></slot>
        </div>
        <div class="itemCountainer">
            <span class="Childrentitle">孩子姓名</span>

            <!-- 孩子姓名 -->
            <slot  name="stuName" class="Childrenmessage"></slot>
            <!-- <span class="Childrenmessage">{{message.stuName}}</span> -->

        </div>
        <div class="itemCountainer">
            <span class="Childrentitle">孩子性别</span>

            <!-- 孩子性别 -->
            <slot name="sex" class="Childrenmessage"></slot>
            <!-- <span class="Childrenmessage">{{message.sex}}</span> -->
            
        </div>
        <div class="itemCountainer">
            <span class="Childrentitle">孩子班级</span>
            <div class="rightinfo">
            <!-- 孩子班级 -->
            <slot name="gradeId" class="Childrenmessage"></slot>
           </div>
            <!-- <span class="Childrenmessage">{{message.gradeId}}</span> -->
        </div>
        <div class="itemCountainer">
            <span class="Childrentitle">孩子身份证号码</span>
            <div class="rightinfo">
            <!-- 孩子身份证号码 -->
            <slot name="idCard" class="Childrenmessage"></slot>
            </div>
            <!-- <span class="Childrenmessage">{{message.idCard}}</span> -->
        </div>
        </div>

</template>

<script>

export default {
    data() {
        return{
            // message:{},
            
        }
    },
    methods:{
        change(){
            
        }
    },
    components:{
        
    },
    mounted(){
        // this.message=this.$route.params.message
        // console.log(this.$route.params.message)
    }
}
</script>

<style scoped>
 /* 右侧内容 */
 .myChildren{
    height: 44.375rem;
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    text-align: center;
    border: .0625rem solid rgba(245, 245, 245, 1);
    width:10rem;
    max-width:120rem;
    min-width:85.375rem;
    margin:0 auto;
    line-height:1.5;
 }
 .headerchildren{
    font-size: 1.5625rem;
    margin-left:31.25rem;
 }
 /* 头部我的孩子 */
 .mychildrenheader{
    height: 4.375rem;
    display: flex;
    align-items: center;
 }
 .itemCountainer{
    display: flex;
    justify-content: space-between;
    height: 3.1875rem;
    align-items: center;
    border: .0625rem solid rgba(245, 245, 245, 1);
 }
 .headerimg{
    height: 1.8125rem;
    width: 1.8125rem;
    margin-left: 43.75rem;
 }
 .Childrentitle{
    margin-left: 1.25rem;
    font-size: 1.25rem;
 }
 .rightInfo{
    margin-right:1.875rem;
 }
.Childrenmessage{
    right: 1.875rem!important;
    color: rgba(153, 153, 153, 1);
}
.icon-you-copy{
    margin-right: 1.875rem;
    font-size: 1.5625rem;
    color: rgba(153, 153, 153, 1);
}
.el-icon-arrow-right{
    margin-right:.625rem;
    cursor:pointer;
}
</style>
